<template>
  <div style="background: white">
    <div style="margin: 0 auto; width: 60%; padding: 25px">
      <div class="app-container">
        <el-form
            ref="ruleForm"
            :model="formData"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
        >
          <div class="grid-content bg-purple">
            <el-form :model="formData" :rules="rules" ref="formData" label-width="80px">
              <el-form-item label="旧密码：" prop="oldPassword">
                <el-input type="password" v-model="formData.oldPassword" placeholder="请输入旧密码"></el-input>
              </el-form-item>
              <el-form-item label="新密码：" prop="newPassword">
                <el-input type="password" v-model="formData.newPassword" placeholder="请输入新密码"></el-input>
              </el-form-item>
              <!-- 提交按钮 -->
              <el-form-item>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { changePassObj, putObj } from '@/api/teacher/teacher'

export default {
  name: "changePass",
  data() {
    const validatePhone = (rule, value, callback) => {
      // if (isValidateNoneMobile(value)[0]) {
      //   callback(new Error(isValidateNoneMobile(value)[1]));
      // } else {
      //   callback();
      // }
    }
    const validatePass = (rule, value, callback) => {
      if (this.ruleForm.password !== '') {
        if (value !== this.ruleForm.newpassword1) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    return {
      avatarUrl: '',
      headers: {
        Authorization: 'Bearer ' + store.getters.token
      },
      formData: {
        token: '',
        oldPassword: '',
        newPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '旧密码不能为空', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '新密码不能为空', trigger: 'blur' }
        ]
        // password: [
        //   {
        //     required: true,
        //     min: 6,
        //     message: "原密码不少于6位",
        //     trigger: "blur",
        //   },
        // ],
        // newpassword1: [
        //   {
        //     required: false,
        //     min: 6,
        //     message: "新密码不少于6位",
        //     trigger: "blur",
        //   },
        // ],
        // newpassword2: [
        //   {required: false, validator: validatePass, trigger: "blur"},
        // ],
      }
    }
  },
  created() {
    console.log(store.getters.token)
  },
  methods: {
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 验证通过，进行提交操作
          this.formData.token = store.getters.token
          changePassObj(this.formData).then((res) => {
            this.$notify.success(res.data)
          })
        } else {
          console.log('表单验证失败')
        }
      })
    },
    submitForm() {
      console.log(this.formData)
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) {
          return false
        }
        putObj(this.formData).then((response) => {
          this.$notify.success('修改成功')
        })
      })
    }
    // getUserInfoEdit() {
    //   var token = store.getters.token;
    //   let formData = new FormData();
    //   formData.append("token", token)
    //   teacherInfo(formData).then((res) => {
    //     this.formData = res.data
    //     this.avatarUrl = res.data.icon;
    //
    //   })
    // },
    // submitForm() {
    //   console.log(this.formData)
    //   this.$refs.ruleForm.validate((valid) => {
    //     if (!valid) {
    //       return false;
    //     }
    //     putObj(this.formData).then((response) => {
    //       this.$notify.success("修改成功");
    //     });
    //   });
    // },
    // handleAvatarSuccess(res, file) {
    //   this.formData.icon = res.data;
    //   this.avatarUrl = res.data;
    // }
  }
}
</script>
<style lang="scss">
.avatar {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
